﻿<html>
<style>
input {
font-size:24px;
}
div {
font-size:24px;
margin: 10px;
}
</style>
<body style="font-size:24px;">
<input type="button" id="getQuestion" value="出题"><input type="button" id="check" value="检查">
<div id="question"></div>
<div style="font-size:12px;">
=(<input style='width:50px;' id="a1"></input>x+<input style='width:50px;' id="b1"></input>)(
<input style='width:50px;' id="a2"></input>x+<input style='width:50px;' id="b2"></input>)
</div>
<div id="domhistory"></div>
<input type="button" id="clear" value="清除历史">
<script>
var num1 = [5,4,3,2,1];
//var num2 = [10,9,8,7,6,5,4,3,2,1,-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,];
var num2 = [-1,-2,4,3,2,1,];

var getQuestion = document.getElementById("getQuestion");
var question = document.getElementById("question");
var check = document.getElementById("check");
var domhistory = document.getElementById("domhistory");
var a1 = document.getElementById("a1");
var b1 = document.getElementById("b1");
var a2 = document.getElementById("a2");
var b2 = document.getElementById("b2");

var printQuestion = (q)=>{
  var {a1,b1,a2,b2} = q;
  var out = "<span>";
  if(a1*a2==1){
  }else{
    out+=(a1*a2);
  }
  out+="x<span style='vertical-align:top;font-size:12px;'>2</span>";
  if(a1*b2+a2*b1>0){
    out += "+"+(a1*b2+a2*b1)+"x";
  }else if(a1*b2+a2*b1<0){
    out += (a1*b2+a2*b1)+"x";
  }
  
  if(b1*b2>0){
    out += "+"+(b1*b2);
  }else if(b1*b2<0){
    out += (b1*b2);
  }
  out+="</span>";
  return "问题：["+out+"] ";
};
var fmt = (v)=>{
  if(!v && v!=0){
    return "?";
  }else{
    return v;
  }
};
var printAns = (q)=>{
    var out = "";
    out+= " 回答：";
    
    var a1 = fmt(q.ansa1) == 1 ? "": fmt(q.ansa1);
    var a2 = fmt(q.ansa2) == 1 ? "": fmt(q.ansa2);
    
    out+="("+a1+"x"+((q.ansb1>=0) ? ("+"+fmt(q.ansb1)) : ("-"+fmt(-q.ansb1)))+")";
    out+="("+a2+"x"+((q.ansb2>=0) ? ("+"+fmt(q.ansb2)) : ("-"+fmt(-q.ansb2)))+")";
	//out+="("+a2+"x+"+fmt(q.ansb2)+")";
    
    out+= " ";

    out += "正确答案：";

    var a1 = q.a1 == 1 ? "": q.a1;
    var a2 = q.a2 == 1 ? "": q.a2;
    
    out+="("+a1+"x"+((q.b1>=0) ? ("+"+fmt(q.b1)) : ("-"+fmt(-q.b1)))+")";
    out+="("+a2+"x"+((q.b2>=0) ? ("+"+fmt(q.b2)) : ("-"+fmt(-q.b2)))+")";
    out+= " ";
    
    return out;
}

var ques = null;

var his = null;
var getHistory = ()=>{
  var temp = localStorage.getItem("history");
  if(temp){
    his = JSON.parse(temp);
  }else{
    his = [];
    localStorage.setItem("history", JSON.stringify(his));
  }
  
  var str = "";
  var i = 1;
  var correctTotal = 0;
  his.forEach((item)=>{
    str+="<div style='font-size:18px;'>第" + i + "题，";
    i++;
    if(item.correct==true){
      str += "<span style='background-color:lawngreen;'>正确</span>，";
      correctTotal++;
    }else if(item.correct==false){
      str += "<span style='background-color:red;'>错误</span>，";
    }else{
      str += "<span style='background-color:grey;'>未答</span>，";
    }
    if(item.ansTime){
      
      str+="用时："+(Math.floor((new Date(item.ansTime)-new Date(item.time))/100)/10)+"秒";
    }
    var d = new Date(item.time);
    str+=" "+(d.getMonth()+1) +"月"+ d.getDate() + "日" + d.getHours()+"点 ";
    str+=printQuestion(item);
    str+=printAns(item);
    str+="</div>";
    console.log(item);
  });
  str+="共"+(i-1)+"题，正确"+correctTotal+"题";
  domhistory.innerHTML = str;
};

getHistory();

clear.onclick=()=>{
    his = [];
    localStorage.setItem("history", JSON.stringify(his));
    getHistory();
};

getQuestion.onclick=()=>{
  ques = {time:new Date(),ansb1:null,ansb2:null,ansTime:null};
  ques.a1 = num1[Math.floor(Math.random()*num1.length)];
  ques.b1 = num2[Math.floor(Math.random()*num2.length)];
  ques.a2 = num1[Math.floor(Math.random()*num1.length)];
  ques.b2 = num2[Math.floor(Math.random()*num2.length)];
  his.push(ques);
  localStorage.setItem("history", JSON.stringify(his));

  var out = printQuestion(ques);

  //getHistory();
  question.innerHTML=out;
  a1.focus();
};

var doCheck = ()=>{
  if(ques){
    
    ques.ansa1 = a1.value == "" ? 1 : a1.value;
    ques.ansa2 = a2.value == "" ? 1 : a2.value;
    ques.ansb1 = b1.value;
    ques.ansb2 = b2.value;
    if(
      ques.a1==ques.ansa1 && ques.b1==ques.ansb1 && ques.a2==ques.ansa2 && ques.b2==ques.ansb2 || 
      ques.a1==ques.ansa2 && ques.b1==ques.ansb2 && ques.a2==ques.ansa1 && ques.b2==ques.ansb1
    ){
      ques.correct = true;
    }else{
      ques.correct = false;
    }
    
    var out = printAns(ques);

    question.innerHTML=out;
    //question.innerHTML="";
    
    ques.ansTime = new Date();
    localStorage.setItem("history", JSON.stringify(his));
    
    
    a1.value="";
    b1.value="";
    a2.value="";
    b2.value="";
    ques = null;
    
    getHistory();
    
  }
}

a1.onkeydown=(e)=>{
  if(e.key=="Enter"){
    b1.focus();
  }  
}

b1.onkeydown=(e)=>{
  if(e.key=="Enter"){
    a2.focus();
  }  
}

a2.onkeydown=(e)=>{
  if(e.key=="Enter"){
    b2.focus();
  }  
}

b2.onkeydown=(e)=>{
  if(e.key=="Enter"){
    doCheck();
    getQuestion.focus();
  }
}

check.onclick=()=>{
  doCheck();
};
</script>

</body>
</html>